<template>
  <div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div v-for="(item, index) in list" :key="item.id" class="shopcartWarp mid mui-card-content-inner">
          <mt-switch @change="changeSelect(item.id,getGoodsSelect[item.id])" v-model="getGoodsSelect[item.id]"></mt-switch>
          <img :src="item.thumb_path" alt="">
          <div class="info">
            <div class="tit">{{item.title}}</div>
            <div class="priceCount">
              <div class="price">${{item.sell_price}}</div>
              <div class="count">
                <div class="mui-numbox">
                <!-- "-"按钮，点击可减小当前数值 -->
                <button class="mui-btn mui-numbox-btn-minus" @click="add(-1,item.id)" type="button">-</button>
                <input  class="mui-numbox-input" type="number" ref="num" v-model="getGoodsCount[item.id]"/>
                <!-- "+"按钮，点击可增大当前数值 -->
                <button  class="mui-btn mui-numbox-btn-plus" @click="add(+1,item.id)" type="button">+</button>
                </div>
              </div>
            </div>
          </div>
          <a href="#" @click.prevent="remove(index,item.id)">删除</a>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mid mui-card-content-inner">
          <div class="mycount">
            <div>已勾选商品{{getGoodsCountAndAmount.count}}件数，总价：￥{{getGoodsCountAndAmount.amount}}</div>
            <mt-button  type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {api} from '@/common/api.js'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      list: []
    }
  },
  computed: {
    ...mapState([
      'shoplist'
    ]),
    ...mapGetters([
      'getGoodsCount', 'getGoodsSelect', 'getGoodsCountAndAmount'
    ]),
    getSelectCount: () => {
      var count = 0
      // this.getGoodsSelect.forEach(element => {
      //   count += element.select ? '1' : '0'
      // })
      return this.getGoodsSelect
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    ...mapMutations({
      upDateShopCate: 'UPDATE_SHOPCATE',
      deleteGood: 'DELETE_GOODS',
      changeSelected: 'CHANGE_SELECT'
    }),
    getlist () {
      // http://www.liulongbin.top:3005/api/goods/getshopcarlist/88,89
      var idList = []
      this.shoplist.forEach(element => {
        idList.push(element.id)
      })
      if (idList.length < 1) {
        return
      }
      this.$axios.get(`${api}goods/getshopcarlist/${idList.join(',')}`).then(res => {
        this.list = res.data.message
      }).catch(err => {
        console.log(err)
      })
    },
    changNum (index) {
      console.log(this.$refs.num[index].value)
      // upDateShopCate()
    },
    add (n, id) {
      this.upDateShopCate({
        count: n, id: id
      })
    },
    remove (index, id) {
      this.list.splice(index, 1)
      this.deleteGood(id)
    },
    changeSelect (id, val) {
      var selectInfo = {id: id, selected: val}
      this.changeSelected(selectInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
  .shopcartWarp{
    display: flex;
    align-items: center;
    .mint-switch{
      font-size:12px
    }
    img{
      width: 0.06rem;
      height: 0.06rem;
      margin:0 8px 0;
    }
    .mui-numbox{
      height: 25px;
    }
    .info{
      font-size:12px;
      .tit{
        color:#222;
        font-weight:700;
        width: 0.22rem;
      }
    }

  }

  .mycount{
    div{
      margin:  0 14px 0;
    }
      display:flex;
      align-items: center;
      justify-content: center;
    }
</style>
